<template>
  <div class="bg_view">
    <div class="progress_box">
      <div style="color: #5aadfb">上传证件</div>
      <div class="omit" style="color: #5aadfb">...</div>
      <div>选择病历</div>
      <div class="omit">...</div>
      <div>填写信息</div>
      <div class="omit">...</div>
      <div>支付押金</div>
    </div>
    <!-- 本人 -->
    <div v-if="tabItemShow == 1">
      <div class="flex_box">
        <div><span>*</span>患者证件</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.patientIdNo1" v-if="qsdata.patientIdNo1" alt="" />
          <img src="@/assets/img/renxiangzhao@2x.png" alt="" v-else />
          <input type="file" @change="changePhoto($event, 1)" class="AddUpload" accept="image/*" />
          <div>上传身份证人像面</div>
        </div>
        <div>
          <img :src="qsdata.patientIdNo2" v-if="qsdata.patientIdNo2" alt="" />
          <img src="@/assets/img/guohuizhao@2x.png" alt="" v-else />
          <input type="file" @change="changePhoto($event, 2)" class="AddUpload" accept="image/*" />
          <div>上传身份证国徽面</div>
        </div>
        <!-- <div>
          <img :src="qsdata.patientIdNo3" v-if="qsdata.patientIdNo3" alt="" />
          <img src="@/assets/img/shouchizhao@2x.png" alt="" v-else />
          <input
            type="file"
            @change="changePhoto($event, 3)"
            class="AddUpload"
            accept="image/*"
          />
          <div>手持身份证人像</div>
        </div> -->
      </div>
    </div>
    <!-- 他人 -->
    <div v-if="tabItemShow == 2">
      <div class="flex_box">
        <div><span>*</span>患者证件</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.patientIdNo1" v-if="qsdata.patientIdNo1" alt="" />
          <img src="@/assets/img/renxiangzhao@2x.png" alt="" v-else />
          <input type="file" @change="changePhoto($event, 1)" class="AddUpload" accept="image/*" />
          <div>上传身份证人像面</div>
        </div>
        <div>
          <img :src="qsdata.patientIdNo2" v-if="qsdata.patientIdNo2" alt="" />
          <img src="@/assets/img/guohuizhao@2x.png" alt="" v-else />
          <input type="file" @change="changePhoto($event, 2)" class="AddUpload" accept="image/*" />
          <div>上传身份证国徽面</div>
        </div>
        <!-- <div>
          <img :src="qsdata.patientIdNo3" v-if="qsdata.patientIdNo3" alt="" />
          <img src="@/assets/img/shouchizhao@2x.png" alt="" v-else />
          <input
            type="file"
            @change="changePhoto($event, 3)"
            class="AddUpload"
            accept="image/*"
          />
          <div>手持身份证人像</div>
        </div> -->
      </div>
      <div class="gap"></div>
      <div class="flex_box">
        <div><span>*</span>委托代理人证件</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.agentIdNo1" v-if="qsdata.agentIdNo1" alt="" />
          <img src="@/assets/img/renxiangzhao@2x.png" alt="" v-else />
          <input type="file" @change="changePhoto($event, 4)" class="AddUpload" accept="image/*" />
          <div>上传身份证人像面</div>
        </div>
        <div>
          <img :src="qsdata.agentIdNo2" v-if="qsdata.agentIdNo2" alt="" />
          <img src="@/assets/img/guohuizhao@2x.png" alt="" v-else />
          <input type="file" @change="changePhoto($event, 5)" class="AddUpload" accept="image/*" />
          <div>上传身份证国徽面</div>
        </div>
        <!-- <div>
          <img :src="qsdata.agentIdNo3" v-if="qsdata.agentIdNo3" alt="" />
          <img src="@/assets/img/shouchizhao@2x.png" alt="" v-else />
          <input
            type="file"
            @change="changePhoto($event, 6)"
            class="AddUpload"
            accept="image/*"
          />
          <div>手持身份证人像</div>
        </div> -->
      </div>
      <!-- <div class="gap"></div>
      <div class="flex_box">
        <div><span>*</span>委托代理人证书</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.agentBook" v-if="qsdata.agentBook" alt="" />
          <img src="@/assets/img/renxiangzhao@2x.png" alt="" v-else />
          <input
            type="file"
            @change="changePhoto($event, 7)"
            class="AddUpload"
            accept="image/*"
          />
        </div>
      </div> -->
    </div>
    <!-- 保险机构 -->
    <div v-if="tabItemShow == 3">
      <div class="flex_box">
        <div><span>*</span>患者证件</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.patientIdNo1" v-if="qsdata.patientIdNo1" alt="" />
          <img src="@/assets/img/renxiangzhao@2x.png" alt="" v-else />
          <input type="file" @change="changePhoto($event, 1)" class="AddUpload" accept="image/*" />
          <div>上传身份证人像面</div>
        </div>
        <div>
          <img :src="qsdata.patientIdNo2" v-if="qsdata.patientIdNo2" alt="" />
          <img src="@/assets/img/guohuizhao@2x.png" alt="" v-else />
          <input type="file" @change="changePhoto($event, 2)" class="AddUpload" accept="image/*" />
          <div>上传身份证国徽面</div>
        </div>
        <!-- <div>
          <img :src="qsdata.patientIdNo3" v-if="qsdata.patientIdNo3" alt="" />
          <img src="@/assets/img/shouchizhao@2x.png" alt="" v-else />
          <input
            type="file"
            @change="changePhoto($event, 3)"
            class="AddUpload"
            accept="image/*"
          />
          <div>手持身份证人像</div>
        </div> -->
      </div>
      <div class="gap"></div>
      <div class="flex_box">
        <div><span>*</span>保险合同复印件</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.agentIdNo1" v-if="qsdata.agentIdNo1" alt="" />
          <img src="@/assets/img/baoxian@2x.png" alt="" v-else />
          <input type="file" @change="changePhoto($event, 4)" class="AddUpload" accept="image/*" />
          <div>保险合同复印件(首页)</div>
        </div>
        <div>
          <img :src="qsdata.agentIdNo2" v-if="qsdata.agentIdNo2" alt="" />
          <img src="@/assets/img/baoxian@2x.png" alt="" v-else />
          <input type="file" @change="changePhoto($event, 5)" class="AddUpload" accept="image/*" />
          <div>保险合同复印件(含签字页)</div>
        </div>
        <!-- <div>
          <img :src="qsdata.agentIdNo3" v-if="qsdata.agentIdNo3" alt="" />
          <img src="@/assets/img/shouchizhao@2x.png" alt="" v-else />
          <input
            type="file"
            @change="changePhoto($event, 6)"
            class="AddUpload"
            accept="image/*"
          />
          <div>手持身份证人像</div>
        </div> -->
      </div>

      <div class="gap"></div>

      <div class="flex_box">
        <div><span>*</span>委托代理人证书</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.agentBook" v-if="qsdata.agentBook" alt="" />
          <img src="@/assets/img/tianjia@2x.png" alt="" v-else />
          <input type="file" @change="changePhoto($event, 7)" class="AddUpload" accept="image/*" />
        </div>
      </div>
    </div>
    <!-- 儿童 -->
    <div v-if="tabItemShow == 4">
      <div class="flex_box">
        <div><span>*</span>儿童患者相关证明</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.patientIdNo1" v-if="qsdata.patientIdNo1" alt="" />
          <img src="@/assets/img/renxiangzhao@2x.png" alt="" v-else />
          <input type="file" @change="changePhoto($event, 1)" class="AddUpload" accept="image/*" />
          <div>户口本儿童页<br />或出生证明</div>
        </div>
        <div>
          <img :src="qsdata.patientIdNo2" v-if="qsdata.patientIdNo2" alt="" />
          <img src="@/assets/img/guohuizhao@2x.png" alt="" v-else />
          <input type="file" @change="changePhoto($event, 2)" class="AddUpload" accept="image/*" />
          <div>户主页</div>
        </div>
        <!-- <div>
          <img
            :src="qsdata.patientIdNo3"
            v-if="qsdata.patientIdNo3"
            alt=""
          />
          <img src="@/assets/img/shouchizhao@2x.png" alt="" v-else />
          <input
            type="file"
            @change="changePhoto($event, 3)"
            class="AddUpload"
            accept="image/*"
          />
          <div>手持身份证人像</div>
        </div> -->
      </div>
      <div class="gap"></div>
      <div class="flex_box">
        <div><span>*</span>亲属证件</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.agentIdNo1" v-if="qsdata.agentIdNo1" alt="" />
          <img src="@/assets/img/renxiangzhao@2x.png" alt="" v-else />
          <input type="file" @change="changePhoto($event, 4)" class="AddUpload" accept="image/*" />
          <div>上传身份证人像面</div>
        </div>
        <div>
          <img :src="qsdata.agentIdNo2" v-if="qsdata.agentIdNo2" alt="" />
          <img src="@/assets/img/guohuizhao@2x.png" alt="" v-else />
          <input type="file" @change="changePhoto($event, 5)" class="AddUpload" accept="image/*" />
          <div>上传身份证国徽面</div>
        </div>
        <!-- <div>
          <img :src="qsdata.agentIdNo3" v-if="qsdata.agentIdNo3" alt="" />
          <img src="@/assets/img/shouchizhao@2x.png" alt="" v-else />
          <input
            type="file"
            @change="changePhoto($event, 6)"
            class="AddUpload"
            accept="image/*"
          />
          <div>手持身份证人像</div>
        </div> -->
      </div>
      <!-- <div class="gap"></div>
      <div class="flex_box">
        <div><span>*</span>委托代理人证书</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.agentBook" v-if="qsdata.agentBook" alt="" />
          <img src="@/assets/img/renxiangzhao@2x.png" alt="" v-else />
          <input
            type="file"
            @change="changePhoto($event, 7)"
            class="AddUpload"
            accept="image/*"
          />
        </div>
      </div> -->
    </div>
    <div class="gap"></div>
    <div class="flex_box">
      <div><span>*</span>患者姓名</div>
      <div>
        <input type="text" placeholder="请输入患者姓名" v-model="qsdata.patientName" />
      </div>
    </div>
    <div class="xian"></div>
    <div class="flex_box">
      <div><span>*</span>证件号码</div>
      <div>
        <input type="text" placeholder="请输入证件号码" v-model="qsdata.idNo" />
      </div>
    </div>
    <div class="xian"></div>
    <div class="flex_box">
      <div><span>*</span>住院号</div>
      <div>
        <input type="text" placeholder="请输入住院号" v-model="qsdata.inpatientNo" />
      </div>
    </div>
    <div class="tipContent">温馨提示：住院号可前往 首页->住院->住院记录 内查看</div>
    <div style="height: 5rem"></div>
    <div class="next_box" @click="nextFun">
      <div>下一步</div>
    </div>
  </div>
</template>
<script>
import userCard from "@/components/userCard.vue";
import * as qiniu from "qiniu-js";
import { Tab, TabItem } from "vux";
import { getQiNiuToken, getInpatientInMainInfo } from "@/api/api";

export default {
  components: {
    userCard,
    Tab,
    TabItem,
  },
  data() {
    return {
      tabItemShow: null,
      dateMaskShow: false,
      qiniuToken: "",
      userInfo: {},
      qsdata: {
        // 上传证件
        method: this.$route.query.method, //办理方式
        patientName: "", //姓名
        idNo: "", //证件号
        inpatientNo: "", //住院号
        patientIdNo1: "", //证件照1
        patientIdNo2: "",
        patientIdNo3: "",
        agentIdNo1: "", //代理人证件照1
        agentIdNo2: "",
        agentIdNo3: "",
        agentBook: "", //委托书
        // 选择病历
        inpatientSerialNo: "", //住院流水号
        patientDoctor: "", //住院医师
        patientDept: "", //住院科室
        patientInDate: "", //入院日期
        patientOutDate: "", //出院日期
        // 复印用途
        purpose: "", //用途
        remark: "", //备注
        expressReceiver: "",
        expressPhone: "",
        expressProvince: "",
        expressCity: "",
        expressArea: "",
        expressAddress: "",
      },
    };
  },
  created() {
    this.tabItemShow = this.$route.query.method;
    document.title = this.$route.query.name
    if (window.localStorage.getItem("userInfo")) {
      this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    } else {
      this.userInfo = JSON.parse(
        window.localStorage.getItem("defaultUserInfo")
      );
    }
    if (window.localStorage.getItem("copydata")) {
      var copydata = JSON.parse(window.localStorage.getItem("copydata"));
      this.qsdata = copydata;
    }
    this.getQiNiuToken();
  },
  methods: {
    // 图片上传
    changePhoto(e, type) {
      const that = this;
      const file = e.target.files[0];
      console.log(file);
      //  alert(file.size /1024/1024)
      const timestamp = Date.parse(new Date());
      const key = that.userInfo.userId + "/" + timestamp + "/" + file.name;
      const token = that.qiniuToken; //从服务器拿的并存在本地data里
      const putExtra = {
        fname: "",
        params: {},
        mimeType: ["image/png", "image/jpeg", "image/gif"],
      };
      const config = {
        useCdnDomain: true, //使用cdn加速
        forceDirect: true, // 强制选择直传
      };
      // 图片压缩参数
      const options = {
        quality: 0.92,
        noCompressIfLarger: true,
        // maxWidth: 1000,
        // maxHeight: 1000,
      };
      that.$vux.loading.show();
      // 图片压缩
      qiniu.compressImage(file, options).then((data) => {
        console.log(data);
        const observable = qiniu.upload(
          data.dist,
          key,
          token,
          putExtra,
          config
        );

        // const observable = qiniu.upload(file, key, token, putExtra, config);
        observable.subscribe({
          next: (result) => {
            // 主要用来展示进度
            console.warn(result);
          },
          error: (err) => {
            that.$vux.loading.hide();
            // alert(err)
            console.log(err);
            alert("上传图片失败");
          },
          complete: (res) => {
            that.$vux.loading.hide();
            console.log(res.key);
            var imgurl = "http://image.eaccessy.com/" + res.key;
            if (type == "1") {
              that.qsdata.patientIdNo1 = imgurl;
            }
            if (type == "2") {
              that.qsdata.patientIdNo2 = imgurl;
            }
            if (type == "3") {
              that.qsdata.patientIdNo3 = imgurl;
            }
            if (type == "4") {
              that.qsdata.agentIdNo1 = imgurl;
            }
            if (type == "5") {
              that.qsdata.agentIdNo2 = imgurl;
            }
            if (type == "6") {
              that.qsdata.agentIdNo3 = imgurl;
            }
            if (type == "7") {
              that.qsdata.agentBook = imgurl;
            }
          },
        });
      });
    },
    getInpatientInMainInfo() {
      var data = {
        hosId: "111",
        operIdcardNo: this.qsdata.idNo,
        patientName: this.qsdata.patientName,
        inpatientNo: this.qsdata.inpatientNo,
      };
      getInpatientInMainInfo(data).then((res) => {
        if (res.code == 200) {
          if (res.data.patientInfo.length == 0) {
            alert("未查询到您的住院信息!");
            return;
          } else {
            this.$router.push({ path: "/select_records" });
          }
        }
      });
    },
    getQiNiuToken() {
      getQiNiuToken().then((res) => {
        if (res.code == 200) {
          this.qiniuToken = res.data;
        }
      });
    },
    tabItemClick(e) {
      this.tabItemShow = e;
    },
    async nextFun() {
      console.log(this.qsdata);
      const that = this;
      if (!that.qsdata.patientName) {
        alert("请输入患者姓名");
        return;
      }

      if (!that.qsdata.idNo) {
        alert("请输入证件号码");
        return;
      } else {
        if (!that.isIdCard(that.qsdata.idNo)) {
          alert("请输入正确的证件号码");
          return;
        }
      }
      if (!that.qsdata.inpatientNo) {
        alert("请输入住院号");
        return;
      }
      if (
        that.tabItemShow == "1" ||
        that.tabItemShow == "2" ||
        that.tabItemShow == "3"
      ) {
        if (!that.qsdata.patientIdNo1) {
          alert("请上传患者身份证人像照");
          return;
        }
        if (!that.qsdata.patientIdNo2) {
          alert("请上传患者身份证国徽照");
          return;
        }
      } else {
        if (!that.qsdata.patientIdNo1) {
          alert("请上传户口本儿童页或出生证明");
          return;
        }
        if (!that.qsdata.patientIdNo2) {
          alert("请上传户主页");
          return;
        }
      }

      if (that.tabItemShow == "2") {
        if (!that.qsdata.agentIdNo1) {
          alert("请上传委托人身份证人像照");
          return;
        }
        if (!that.qsdata.agentIdNo2) {
          alert("请上传委托人身份证国徽照");
          return;
        }
      }
      if (that.tabItemShow == "3") {
        if (!that.qsdata.agentIdNo1) {
          alert("保险合同复印件(首页)");
          return;
        }
        if (!that.qsdata.agentIdNo2) {
          alert("保险合同复印件(含签字页)");
          return;
        }
      }
      if (that.tabItemShow == "4") {
        if (!that.qsdata.agentIdNo1) {
          alert("请上传亲属身份证人像照");
          return;
        }
        if (!that.qsdata.agentIdNo2) {
          alert("请上传亲属身份证国徽照");
          return;
        }
      }
      if (that.tabItemShow == "3") {
        if (!that.qsdata.agentBook) {
          alert("请上传委托书照片");
          return;
        }
      }
      window.localStorage.setItem("copydata", JSON.stringify(that.qsdata));
      window.localStorage.removeItem("selectIndex");
      await that.getInpatientInMainInfo();
    },
    isIdCard(idCard) {
      // 15位和18位身份证号码的正则表达式
      var regIdCard =
        /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;

      // 如果通过该验证，说明身份证格式正确，但准确性还需计算
      if (regIdCard.test(idCard)) {
        if (idCard.length == 18) {
          var idCardWi = new Array(
            7,
            9,
            10,
            5,
            8,
            4,
            2,
            1,
            6,
            3,
            7,
            9,
            10,
            5,
            8,
            4,
            2
          ); // 将前17位加权因子保存在数组里
          var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); // 这是除以11后，可能产生的11位余数、验证码，也保存成数组
          var idCardWiSum = 0; // 用来保存前17位各自乖以加权因子后的总和
          for (var i = 0; i < 17; i++) {
            idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
          }

          var idCardMod = idCardWiSum % 11; // 计算出校验码所在数组的位置
          var idCardLast = idCard.substring(17); // 得到最后一位身份证号码

          // 如果等于2，则说明校验码是10，身份证号码最后一位应该是X
          if (idCardMod == 2) {
            if (idCardLast == "X" || idCardLast == "x") {
              //alert("恭喜通过验证啦！");
              return true;
            } else {
              //alert("身份证号码错误！");
              return false;
            }
          } else {
            // 用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
            if (idCardLast == idCardY[idCardMod]) {
              //alert("恭喜通过验证啦！");
              return true;
            } else {
              //alert("身份证号码错误！");
              return false;
            }
          }
        } else {
          return true;
        }
      } else {
        //alert("身份证格式不正确!");
        return false;
      }
    },
  },
};
</script>
<style scoped>
.tab_box {
  width: calc(100% - 2rem);
  padding: 0 1rem;
}

.progress_box {
  width: calc(100% - 2rem);
  height: 2.75rem;
  background-color: #f7fafd;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  padding: 0 1rem;
  color: #b6becc;
  font-size: 0.9375rem;
  line-height: 2.75rem;
}

.progress_box .omit {
  line-height: 2.25rem;
}

.papers_box {
  width: calc(100% - 2rem);
  background-color: #fff;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.papers_box>div {
  width: calc(100% / 2);
  height: 10rem;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  flex-flow: column;
  font-size: 0.8125rem;
  color: #b6bdcc;
  position: relative;
}

.papers_box>div>div {
  text-align: center;
}

.papers_box>div>.AddUpload {
  height: 100%;
  width: 100%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
}

.papers_box>div>img {
  width: 162px;
  height: 110px;
  margin-bottom: 0.8125rem;
  object-fit: contain;
}

.gap {
  width: calc(100%);
  height: 0.625rem;
  background-color: #f7fafd;
}

.xian {
  width: calc(100% - 2rem);
  height: 0.0625rem;
  background-color: #e7ecf5;
  margin: 0 auto;
}

.tipContent {
  font-size: 0.8125rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #F72D23;
  line-height: 20px;
  text-align: center;
  margin-top: 3rem;
}

.flex_box {
  width: calc(100% - 2rem);
  background-color: #fff;
  padding: 1rem;
  font-weight: 500;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex_box span {
  color: #e92121;
}

.flex_box input {
  border: none;
  font-size: 1rem;
  text-align: right;
}

.next_box {
  width: calc(100% - 2rem);
  height: 2.75rem;
  padding: 0 1rem;
  position: fixed;
  bottom: 10px;
}

.next_box>div {
  background: linear-gradient(90deg, #448eff 0%, #66a3ff 100%);
  border-radius: 3px;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 2.75rem;
  color: #fff;
}
</style>